<template>
    <div>
        <el-row>
            <el-col :span="6">
                <el-input v-model="params.username" placeholder="请输入用户名称" size="small" @change="getUserData()"></el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" size="small" @click="edit(null, '添加用户')">添加</el-button>
            </el-col>
            <el-col :span="4">
                <el-radio-group v-model="params.order" size="small" @change="getUserData()">
                    <el-radio-button label="1">升序</el-radio-button>
                    <el-radio-button label="0">降序</el-radio-button>
                </el-radio-group>
            </el-col>
        </el-row>
        <el-table :data="userData.records" stripe>
            <el-table-column label="用户名称" width="250px" fixed="left">
                <template slot-scope="scope">
                    <el-popover placement="top-end" trigger="hover">
                        <span slot="reference">{{ scope.row.username }}</span>
                        <el-avatar :size="150" shape="circle" :src="imgPath(scope.row.icon)"></el-avatar>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="性别" width="150px">
                <template slot-scope="scope">
                    <span v-if="scope.row.gender">男</span>
                    <span v-else>女</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号码" prop="phone" min-width="250px"></el-table-column>
            <el-table-column label="电子邮箱" prop="email" min-width="250px"></el-table-column>
            <el-table-column label="操作" width="200px" fixed="right">
                <template slot-scope="scope">
                    <template v-if="scope.row.active">
                        <el-button type="warning" size="small" @click="edit(scope.row.id, '修改用户')">修改</el-button>
                        <el-button type="danger" size="small" @click="del(scope.row.id, 0, '禁用')">禁用</el-button>
                    </template>
                    <template v-else>
                        <el-button type="success" size="small" @click="del(scope.row.id, 1, '启用')">启用</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination 
            background 
            :total="userData.total" 
            :current-page.sync="params.pageNo" 
            :page-size="params.pageSize" 
            :page-sizes="pageSizes"
            @current-change="getUserData()" 
            @size-change="(val) => {this.params.pageSize = val; this.getUserData()}" 
            layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        <el-dialog :title="dialog.title" :visible.sync="dialog.show" :close-on-click-modal="false" width="550px">
            <component :is="dialog.component" :show.sync="dialog.show" @getUserData="getUserData" :id="dialog.id" v-if="dialog.show"></component>
        </el-dialog>
    </div>
</template>

<script>
    import { get } from '@/plugins/axios.js'
    import { url } from './api.js'
    export default {
        name: 'User',
        created() {
            this.getUserData()
        },
        data() {
            return {
                userData: {},
                params: {
                    pageNo: 1,
                    pageSize: 8,
                    username: "",
                    order: 1,
                },
                pageSizes: [5, 8, 10, 15],
                dialog: {
                    show: false,
                    title: '',
                    id: null,
                    component: () => import('./edit.vue')
                }
            }
        },
        methods: {
            getUserData() {
                get(url.list, this.params, content => {
                    this.userData = content
                })
            },
            del(id, active, message) {
                this.$confirm('此操作将'+ message + '该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    get(url.delete, {id, active}, content => {
                        this.getUserData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });                
            },
            edit(id, title) {
                this.dialog.id = id
                this.dialog.show = true
                this.dialog.title = title
            },
            setPageSize(val) {
                this.params.pageSize = val
                this.getUserData()
            }
        }
    }
</script>

<style scoped lang="less">
    .el-row {
        position: relative;

        .el-col:nth-of-type(2) {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
        }
        .el-col:nth-of-type(3) {
            float: right;

            .el-radio-group {
                width: 100% !important;

                .el-radio-button {
                    width: 50% !important;

                    /deep/ .el-radio-button__inner {
                        width: 100%;
                    }
                }
            }
        }
    }
    .el-table {
        margin-top: 30px;

        
    }
    /deep/ .cell {
        text-align: center;
    }
    .el-pagination {
        text-align: center; 
        margin-top: 30px;
    }
    .el-avatar /deep/ img {
        width: 150px;
        height: 150px;
    }
</style>